$(function(){
    $.ajax({
        url:"js/shuju.json",
        type:'get',
        dataType:'json',
        success: function(res){
            $.each(res,function(a,b){
                $("#box").append("<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12'><img src='img/"+b.imgSrc+"'><div><p>"+b.section+"</p><h3>"+b.name+"</h3><p>"+b.price+"</p></div></div>")
            })
        }
    })
    $.ajax({
        url:"js/shuju2.json",
        type:'get',
        dataType:'json',
        success: function(res){
            $.each(res,function(a,b){
                $("#box2").append("<div class='dd col-lg-3 col-md-3 col-sm-6 col-xs-12'><a href='#'><img src='img/"+b.imgSrc+"'><div><p class='p-section'>"+b.section+"</p><h5>"+b.name+"</h5><p class='dixia'>"+b.price+"</p></div></a></div>")
                if(a%4==0){
                    $(".dd").eq(a).before("<div class='top col-lg-12 col-md-12 col-sm-12 col-xs-12'></div><div chass='s4-text col-lg-12 col-md-12 col-sm-12 col-xs-12'>"+b.text_left+"<span>查看更多</span></div>")
                }
            })
        }
    })



    $('.wecat').hover(function(){
        $('.tan1').fadeIn(400)
    },function(){
        $('.tan1').stop(true).fadeOut(200)
    })


    $('.aphone').hover(function(){
        $('.tan2').fadeIn(400)
    },function(){
        $('.tan2').stop(true).fadeOut(200)
    })


    $('.anirod').hover(function(){
        $('.tan3').fadeIn(400)
    },function(){
        $('.tan3').stop(true).fadeOut(200)
    })

    $('#box').on('mouseenter','div',function(){
        $(this).children('div').stop(false).animate({'margin-top':'-25px','height':'225px'},500)
        $(this).children('img').stop(false).animate({'margin-top':'-25px','margin-bottom':'25px'},500)
    })
    $('#box').on('mouseleave','div',function(){
        $(this).children('div').stop(false).animate({'margin-top':'0','height':'200px'},500)
        $(this).children('img').stop(false).animate({'margin-top':'0','margin-bottom':'0'},500)
    })


    $('#box2').on('mouseenter','.dd',function(){
        $(this).children('a').children('div').stop(false).animate({'margin-top':'-25px','height':'225px'},500)
        $(this).children('a').children('img').stop(false).animate({'margin-top':'-25px','margin-bottom':'25px'},500)
    })
    $('#box2').on('mouseleave','.dd',function(){
        $(this).children('a').children('div').stop(false).animate({'margin-top':'0','height':'200px'},500)
        $(this).children('a').children('img').stop(false).animate({'margin-top':'0','margin-bottom':'0'},500)
    })


})
